<template>
    <div>
        <div class="xw-block" style="display: flex">
            <el-input v-model="pageRequest.q.categoryName" style="width: 300px" placeholder="请输入你想搜索的内容？"
                      clearable @clear="clearSearch"></el-input>
            <el-button style="margin-left: 20px" type="primary" @click="load">搜索</el-button>
        </div>

        <div class="xw-block" style="display: flex">
            <el-button type="primary" @click="add">新增课程分类</el-button>
            <el-popconfirm
                style="margin-left: 5px"
                confirm-button-text="确定"
                cancel-button-text="我再想想"
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="delBatch"
            >
                <el-button slot="reference">批量删除</el-button>
            </el-popconfirm>
        </div>

        <el-table
            class="xw-block-table"
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="categoryName"
                label="分类名称"
            >
            </el-table-column>
            <el-table-column
                prop="categoryImg"
                label="分类图片"
            >
                <template slot-scope="scope">
                    <el-image style="width: 70px;height: 70px" :src="scope.row.categoryImg"
                              :preview-src-list="[scope.row.categoryImg]" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="categoryDesc"
                label="描述"
            >
            </el-table-column>

            <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                    <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-popconfirm
                        style="margin-left: 5px"
                        confirm-button-text="确定"
                        cancel-button-text="我再想想"
                        icon="el-icon-info"
                        icon-color="red"
                        title="您确定要删除吗？"
                        @confirm="del(scope.row.id)"
                    >
                        <el-button slot="reference" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="xw-block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="pageSizeArr"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <MyDrawer ref="MyDrawer" :title="this.selectRow.id ? '更新':'新增'" @saveOrUpdate="saveOrUpdate">
            <el-form class="line" label-position="top">
                  <el-form-item label="分类图片">
                    <el-upload
                        class="avatar-uploader"
                        :action="baseURL() + '/file/upload'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="selectRow.categoryImg" :src="selectRow.categoryImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input placeholder="请输入分类名称" v-model="selectRow.categoryName"></el-input>
                </el-form-item>
                <el-form-item label="分类描述">
                    <el-input placeholder="分类描述" v-model="selectRow.categoryDesc"></el-input>
                </el-form-item>
            </el-form>
        </MyDrawer>
    </div>
</template>
<script>
import MyDrawer from "@/components/MyDrawer.vue"

export default {
    data() {
        return {
            delIds: [],
            selectRow: {},
            pageSizeArr: [10, 20, 30, 40],
            tableData: [],
            pageRequest: {
                pageNum: 1,
                pageSize: 10,
                q: {
                    categoryName: ''
                }
            },
            total: 0
        }
    },
    components: {MyDrawer},
    mounted() {
        this.load()
    },
    methods: {
        handleAvatarSuccess(e) {
            if (e.code === '200') {
                this.selectRow.categoryImg = e.data
                this.$forceUpdate()
            }
        },
        edit(row) {
            this.selectRow = row
            this.$refs.MyDrawer.open(this.selectRow)
        },
        add() {
            this.selectRow = {}
            this.$refs.MyDrawer.open()
        },
        del(id) {
            this.request.delete("/subjectCategory/" + id).then(res => {
                if (res.code === '200') {
                    this.messageSuccess("删除成功")
                    this.load()
                } else {
                    this.messageError("删除失败")
                }
            })
        },
        delBatch() {
            if (this.delIds && this.delIds.length > 0) {
                this.request.post("/subjectCategory/deleteBatchByIds", this.delIds).then(res => {
                    if (res.code === '200') {
                        this.messageSuccess("删除成功")
                        this.load()
                    } else {
                        this.messageError("删除失败")
                    }
                })
            } else {
                this.messageError("请先勾选数据")
            }
        },
        saveOrUpdate(e) {
            console.log("saveOrUpdate",  this.selectRow)
            if (this.selectRow.id??'') {
              this.request.post("/subjectCategory/update", this.selectRow).then(res => {
                if (res.code === '200') {
                  if (!this.selectRow.id) {
                    this.messageSuccess(`操作成功`)
                  } else {
                    this.messageSuccess("操作成功")
                  }
                  this.$refs.MyDrawer.close()
                  this.load()
                } else {
                  this.messageError(res.msg)
                }
              })

            }else {
              this.request.post("/subjectCategory/create", this.selectRow).then(res => {
                if (res.code === '200') {
                  if (!this.selectRow.id) {
                    this.messageSuccess(`操作成功`)
                  } else {
                    this.messageSuccess("操作成功")
                  }
                  this.$refs.MyDrawer.close()
                  this.load()
                } else {
                  this.messageError(res.msg)
                }
              })
            }

        },
        // 清空搜索
        clearSearch() {
          this.menuName = '';
          this.load(); // 可选：清空后重新加载数据
        },

        load() {
            this.request.post("/subjectCategory/page", this.pageRequest).then(res => {
                if (res.code === '200') {
                    this.tableData = res.data.list
                    this.total = res.data.total
                }
            })
        },
        handleSizeChange(size) {
            this.pageRequest.pageSize = size
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageRequest.pageNum = pageNum
            this.load()
        },
        handleSelectionChange(e) {
            this.delIds = e.map(x => x.id)
        }
    }
}
</script>